<template>
  <div class="amap">
    <div class="baidumap" id="allmap"></div>
  </div>
</template>
<script>
import BMap from 'BMap'
// 在 public 文件的index.html script标签引入百度地图的api
// 在webpack.base.conf.js中设置externals属性 BMap:'BMap'
// 在用到的文件中 import BMap from 'BMap'; 在直接用就可以了

export default {
  data () {
    return {
      baseMap: null,
      position_NKYYGS: {
        Name: '四川省农业科学院',
        address: '成都市锦江区静居寺路20号',
        phoneNumber: '(028)84504011',
        bdLNG: 104.114026,
        bdLAT: 30.630106
      }
    }
  },
  mounted () {
    this.baiduMap()
    const _this = this
    setTimeout(() => {
      console.log(222222)
      var point = new BMap.Point(116.404269, 39.916042) // 创建点坐标
      // _this.baseMap.setCenter(point)
      // _this.baseMap.centerAndZoom(point)
      _this.baseMap.Viewport({
        center: point,
        zoom: 13
      })
    }, 1000)
  },
  methods: {
    baiduMap () {
      this.baseMap = new BMap.Map('allmap') // 创建地图实例
      this.baseMap.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
      // map.setMapStyle({ style: 'midnight' }) // 地图风格
      // normal 系统默认 light 清新蓝风格 dark 黑夜风格 redalert 红色警戒风格 googlelite 精简风格 grassgreen 自然绿风格
      // midnight 午夜蓝风格  pink 浪漫粉风格 darkgreen 青春绿风格 bluish 清新蓝绿风格  grayscale 高端灰风格 hardedge 强边界风格
      // this.baseMap.setMapType(BMAP_NORMAL_MAP)
      // this.baseMap.setMapType(BMAP_HYBRID_MAP)
      this.baseMap.clearOverlays() // 清除地图上所有覆盖物
      // 将数据遍历
      // 自定义信息窗口内容
      var sContent =
        '<div style="width:300px;"><p style="font-size:16px;font-weight:bold;margin-top: 10px;color:#D07852">' +
        this.position_NKYYGS.Name +
        '</p><p style="font-size:13px;margin: 5px 0;">地址：' +
        this.position_NKYYGS.address +
        '</p><p style="font-size:13px;margin: 5px 0;">电话：' +
        this.position_NKYYGS.phoneNumber +
        '</p><p style="font-size:13px;margin: 5px 0;">坐标：' +
        this.position_NKYYGS.bdLNG +
        ',' +
        this.position_NKYYGS.bdLAT +
        ('</div>')
      var point = new BMap.Point(this.position_NKYYGS.bdLNG, this.position_NKYYGS.bdLAT) // 创建点坐标
      var marker = new BMap.Marker(point)
      this.baseMap.addOverlay(marker)
      this.baseMap.centerAndZoom(point, 9) // 初始化地图，设置中心点坐标和地图级别
      // // 点击图标时候调用信息窗口
      var infoWindow = new BMap.InfoWindow(sContent)
      marker.addEventListener('click', function () {
        this.openInfoWindow(infoWindow)
      })
    }
  }
}
</script>
<style>
.amap {
  height: 100%;
}
.baidumap {
  width: 500px;
  height: 400px;
}

/* 去除百度地图版权那行字 和 百度logo */
.baidumap > .BMap_cpyCtrl {
  display: none !important;
}
.baidumap > .anchorBL {
  display: none !important;
}
</style>
